<template>
  <PageWrapper>
    <a-card>
      <div>
        <a-row type="flex" justify="space-between">
          <a-col>
            <a-input-search
              v-model:value="searchValue"
              :placeholder="$t('faultDiagnosis.inputHostOrAbnormalEvent')"
              @search="fnSearchFault"
            />
          </a-col>
          <a-col>
            <time-range id="fault" @changeTime="fnChangeTime" :refresh="refreshTime" :had-period="false"></time-range>
          </a-col>
        </a-row>
        <a-table
          :data-source="showTable"
          ref="table"
          row-key="id"
          :columns="column"
          @change="handleTableChange"
        >
<!--          :row-selection="{-->
<!--            type: 'radio',-->
<!--            onSelect: showFaultDetail,-->
<!--          }"-->

        </a-table>
      </div>
      <!--      <div style="height: 570px" v-if="selectHost.id" v-loading="detailLoading">-->
      <!--        <el-tabs v-model="activeTab">-->
      <!--          <el-tab-pane-->
      <!--            :label="$t('faultDiagnosis.systemMonitor')"-->
      <!--            name="monitor"-->
      <!--            class="OSTop"-->
      <!--            @click="resizeOStopChart"-->
      <!--          >-->
      <!--            <div>-->
      <!--              <div style="display: flex; justify-content: space-between">-->
      <!--                <div>{{ selectHost.host }}</div>-->
      <!--                <div>{{ selectHost.timeStr }}</div>-->
      <!--              </div>-->
      <!--              <el-row :gutter="12" style="height: 240px">-->
      <!--                <el-col :span="9">-->
      <!--                  <cpu-model v-model:value="detailData.osTop.cpu" ref="cpu">-->
      <!--                    &lt;!&ndash; 左上 CPU &ndash;&gt;-->
      <!--                  </cpu-model>-->
      <!--                </el-col>-->
      <!--                <el-col :span="7">-->
      <!--                  <mem-model v-model:value="detailData.osTop.mem" ref="mem">-->
      <!--                    &lt;!&ndash; 中上 MEM &ndash;&gt;-->
      <!--                  </mem-model>-->
      <!--                </el-col>-->
      <!--                <el-col :span="8">-->
      <!--                  <fs-model v-model:value="detailData.osTop.fs" ref="fs">-->
      <!--                    &lt;!&ndash; 右上 FS &ndash;&gt;-->
      <!--                  </fs-model>-->
      <!--                </el-col>-->
      <!--              </el-row>-->

      <!--              <el-row :gutter="12" style="height: 240px">-->
      <!--                <el-col :span="12" style="height: 100%">-->
      <!--                  <disk-model v-model:value="detailData.osTop.disk">-->
      <!--                    &lt;!&ndash; 左中 Disk &ndash;&gt;-->
      <!--                  </disk-model>-->
      <!--                </el-col>-->
      <!--                <el-col :span="12">-->
      <!--                  <net-model v-model:value="detailData.osTop.nic"> &lt;!&ndash; 右中 NET &ndash;&gt; </net-model>-->
      <!--                </el-col>-->
      <!--              </el-row>-->
      <!--            </div>-->
      <!--          </el-tab-pane>-->
      <!--          <el-tab-pane :label="$t('faultDiagnosis.faultTopology')" name="topo" @click="resizeTopoChart">-->
      <!--            <div style="height: 530px">-->
      <!--              <div class="detailBox">-->
      <!--                <detail-drawer ref="detail" :select-node="selectHost" :not-close="true"></detail-drawer>-->
      <!--              </div>-->
      <!--              <fault-topo ref="faultChart" :select-host="selectHost"></fault-topo>-->
      <!--            </div>-->
      <!--          </el-tab-pane>-->
      <!--        </el-tabs>-->
      <!--      </div>-->
    </a-card>
  </PageWrapper>
</template>

<script>
// import cpuModel from '../../osTop/dataShow/cpuModel'
// import memModel from '../../osTop/dataShow/memModel'
// import diskModel from '../../osTop/dataShow/diskModel'
// import netModel from '../../osTop/dataShow/netModel'
// import fsModel from '../../osTop/dataShow/fsModel'
// import DetailDrawer from '../../architecture/detailDrawer'
// import FaultTopo from './faultTopo'

import { api } from '@/api'
import { formatDateTime } from '@/components/time/timeFormat'
import PageWrapper from '@/components/PageWrapper.vue'
import TimeRange from '@/components/time/timeRange.vue'

export default {
  name: 'faultDiagnosis',
  data() {
    return {
      searchValue: '',
      faultList: [],
      showTable: [],
      column: [
        {
          title: this.$t('common.time'),
          dataIndex: 'timeStr',
          width: '200',
        },
        {
          title: this.$t('assests.hostName'),
          dataIndex: 'host',
          width: '200',
        },
        {
          title: this.$t('faultDiagnosis.abnormalEvent'),
          dataIndex: 'event',
          width: '300',
        },
        {
          title: this.$t('faultDiagnosis.eventDesc'),
          dataIndex: 'description',
        },
      ],
      timer: null,
      refreshTime: false,
      interval: null, // 用于定时查询

      activeTab: 'monitor',
      selectHost: {},
      detailData: {
        osTop: {},
        chart: null,
      },
      detailLoading: false,
    }
  },
  components: {
    TimeRange,
    PageWrapper,
    // FaultTopo,
    // DetailDrawer,
    // cpuModel,
    // memModel,
    // diskModel,
    // netModel,
    // fsModel,
  },
  watch: {
    activeTab(val) {
      if (val === 'monitor') {
        this.resizeOStopChart()
      } else {
        this.resizeTopoChart()
      }
    },
  },
  methods: {
    async initPage() {
      const param = {
        startTime: this.timer.start,
        endTime: this.timer.end,
      }
      const [_, res] = await api.fnGetFaultList(param)
      this.faultList = res.map(item => {
        item.timeStr = formatDateTime(item.time)
        item.id = item.event_id
        item.key = item.machine_id
        item.type = 'host'
        item.name = item.host
        return item
      })
      this.fnSearchFault()
    },
    handleTableChange(page) {
      page.current && (this.pagination.current = page.current)
      page.pageSize && (this.pagination.pageSize = page.pageSize)
      this.initPage()
    },
    fnChangeTime(start, end, period, timer) {
      this.refreshTime = false
      this.timer = {
        start,
        end,
        timer,
      }
      this.initPage()
      if (this.timer) {
        // 如果是固定时间就不定时查询，否则定时更新
        if (this.interval) {
          clearInterval(this.interval)
        }
        this.interval = setInterval(
          () => {
            this.refreshTime = true
          },
          1000 * 60 * 5,
        )
      }
    },
    fnSearchFault() {
      if (!this.searchValue.trim()) {
        this.showTable = this.faultList
        return
      }
      this.showTable = this.faultList.filter(
        item => item.host.indexOf(this.searchValue.trim()) > -1 || item.event.indexOf(this.searchValue.trim()) > -1,
      )
    },
    showFaultDetail(row) {
      if (this.selectHost.id === row.id) {
        this.selectHost = {}
        this.$refs.table.setCurrentRow() // 取消当前高亮
      } else {
        this.selectHost = row
        this.$refs.table.setCurrentRow(row) // 设置当前高亮
        this.initDetail()
      }
    },
    async initDetail() {
      this.detailLoading = true
      const [_, res] = await api.fnGetAllOsTopData({
        machineId: this.selectHost.machine_id,
        timestamp: this.selectHost.time,
      })
      this.detailData.osTop = res.data
      this.detailLoading = false
    },
    resizeOStopChart() {
      this.$refs.cpu.resizeChart()
      this.$refs.mem.resizeChart()
      this.$refs.fs.resizeChart()
    },
    resizeTopoChart() {
      this.$refs.faultChart.fnResize()
    },
  },
  beforeUnmount() {
    if (this.interval) {
      clearInterval(this.interval)
    }
  },
}
</script>

<style scoped lang="less">
::v-deep {
  .el-row {
    margin-bottom: 10px;
  }
  .el-col {
    border-radius: 4px;
    height: 100%;
  }
  .detailBox {
    width: 30%;
    height: 100%;
    float: right;
    overflow-y: auto;
    border-left: 1px solid var(--border);
  }
}
</style>
